<template>
	<uni-nav-bar title="历史班次" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" style="padding: 10px 0px;">
		<view class="space-between datas">
			<uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
				@change="change" />
			<hpy-form-select :dataList="dataList" text="name" name="value" @change="consoluFill" :Text="typesOf"
				:icon="true" />
		</view>
	</view>
	<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box package"
		:style="{ height: pageHeight + 'px',padding:'0px' }">
		<view class="space-between list" v-for="item in workList" :key="item.id"
			@click="navTo('administrator/sale/historyDetail?id='+item.id+'&type=control')">
			<view>{{item.staff_name}}</view>
			<view>{{item.title}}<uni-icons type="right" size="20"></uni-icons></view>
		</view>
		<Popu v-if="workList.length<1" :pageHeight="pageHeight" text="暂无历史班次"></Popu>
	</scroll-view>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import Popu from '@c/earthPushing/common/popu.vue';
	import { ref } from 'vue';
	import { toPublish } from '@mqtt';
	import { showLoading } from '@/utils/prompt';
	import { getStaffAll, getStaffBanList } from '@/gql/administrator';
	import { format, subDays } from 'date-fns';
	let now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	let daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);
	const typesOf = ref('筛选')
	const dataList = ref([])
	const workList = ref([])
	const lastPage = ref(1);
	const currentPage = ref(1);
	const staff_id = ref()
	const pageHeight = ref();
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 120;
		},
	});
	/**
	  * 获取地推人员列表
	  */
	init()
	function init() {
		showLoading()
		const payload = {
			query: getStaffAll,
			variables: {
				keywords: ''
			},
		};
		toPublish(
			'ql/control/getStaffAll',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getStaffAll } = obj.data;
				dataList.value = getStaffAll;
			}
		);
	}
	workLists()
	function workLists() {
		showLoading()
		const payload = {
			query: getStaffBanList,
			variables: {
				page: currentPage.value,
				start,
				end,
				staff_id: staff_id.value
			},
		};
		toPublish(
			'ql/control/getStaffBanList',
			payload,
			(obj : any) => {
				const { getStaffBanList } = obj.data;
				workList.value = [...workList.value, ...getStaffBanList.list];
				lastPage.value = getStaffBanList.lastpage;
			}
		);
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
		if (currentPage.value < lastPage.value) {
			currentPage.value++;
			workLists();
		}
	}
	/**
	 * 时间筛选
	 * @param sta  开始时间
	 * @param en  结束时间
	 */
	function change([sta, en]) {
		start = sta;
		end = en;
		currentPage.value = 1
		workList.value = []
		workLists()
	}
	//切换筛选
	function consoluFill(e : any) {
		typesOf.value = e.data.name
		staff_id.value = e.data.id;
		currentPage.value = 1
		workList.value = []
		workLists()
	}
</script>

<style scoped lang="less">
	.list {
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
	}
</style>
<style>
	.datas>>>.uni-date__x-input {
		font-size: 30rpx !important;
	}

	.datas>>>.uni-date-x {
		font-size: 30rpx !important;
	}

	.datas>>>.uni-icons {
		font-size: 48rpx !important;
	}

	.datas>>>.uni-date-x {
		padding: 0px 0px 0px 10rpx;
	}

	.datas>>>.select-picker {
		justify-content: flex-end;
		width: 200rpx;
	}

	.datas>>>.select-picker {
		font-size: 26rpx;
	}
</style>